<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/html_head :: head(~{::title},~{},~{})">
  <title>我的收集表</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- 主 头部 -->
  <header th:insert="common/top :: top"></header>
  <!-- 左侧菜单，包含logo、搜索、菜单-->
  <aside th:insert="common/left :: left"></aside>

  <!-- Content Wrapper. 页面内容 -->
  <div class="content-wrapper">
    <!-- 页面头部  -->
    <section class="content-header">
      <h1>
        我发起的
        <small>展示所有由我发起的信息收集表</small>
      </h1>
      <!-- 导航栏 -->
      <ol class="breadcrumb">
          <li><a href="/index"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">我发起的</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
      <!--------------------------
        |      页面内容放在这      |
        -------------------------->
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">我的收集表</h3>
            </div>
            <!-- /.box-header -->
              <style>
                  @media screen and (max-width: 900px) {
                      table {
                          overflow-x: auto;
                      }
                  }
              </style>
            <h4 th:remove="${tableList.size() > 0 ? 'all' : 'none'}">&nbsp;&nbsp;&nbsp;&nbsp;空空如也，去<b><a href="/collect/new">创建</a></b>吧~</h4>
            <div class="box-body" th:remove="${tableList.size() > 0 ? 'none' : 'all'}">
              <table id="table" class="table table-bordered table-striped">

                <thead>
                <tr>
                  <th>名称</th>
                  <th>状态</th>
                  <th>开始时间</th>
                  <th>截止时间</th>
                    <th>已填</th>
                  <th width="35%">操作</th>
                </tr>
                </thead>

                <tbody>
                <tr th:each="table : ${tableList}">
                  <td>
                    <a th:href="'/collect/my/detail?t=' + ${table.id}">
                      <b>
                        <span th:id="'table-name-' + ${table.id}" th:text="${table.name}">15计科生源统计表</span>
                      </b>
                    </a>
                  </td>
                  <td th:text="${table.state}" th:id="'table-state-' + ${table.id}">设计中</td>
                  <td th:text="${#dates.format(table.startTime,'yyyy-MM-dd HH:mm')}">2019-3-15</td>
                  <td th:text="${#dates.format(table.endTime,'yyyy-MM-dd HH:mm')}" th:id="'table-endTime-' + ${table.id}">2019-3-15</td>
                  <td th:text="${table.filledNum}">10</td>
                    <th>
                        <a th:href="'/collect/edit?t=' + ${table.id}">
                            <button type="button" class="btn btn-sm btn-primary" th:remove="${'编辑中' == table.state ? 'none' : 'all'}">
                                <i class="glyphicon glyphicon-edit"> </i> 设计
                            </button>
                        </a>
                        <button type="button" class="btn btn-sm btn-warning" th:onclick="'table_publish_fun(' + ${table.id} +  ')'"
                                th:remove="${'已截止' == table.state? 'all' : 'none'}">
                            <i class="glyphicon glyphicon-share-alt"> </i> 分享
                        </button>
                        <button type="button" class="btn btn-sm btn-danger" th:onclick="'table_stop_fun(' + ${table.id} + ')'"
                                th:remove="${'收集中' == table.state ? 'none' : 'all'}">
                            <i class="glyphicon glyphicon-stop"> </i> 停止
                        </button>
                        <a th:href="'/collect/export?t=' + ${table.id}">
                            <button type="button" class="btn btn-sm btn-success" th:remove="${'编辑中' == table.state ? 'all' : 'none'}">
                                <i class="glyphicon glyphicon-export"> </i> 导出
                            </button>
                        </a>
                        <a th:href="'/collect/new/byCopy/' + ${table.id}">
                            <button type="button" class="btn btn-sm btn-info" >
                                <i class="fa fa-copy"> </i> 复制
                            </button>
                        </a>
                        <button type="button" class="btn btn-sm btn-danger" th:onclick="'table_del_fun(' + ${table.id} + ')'">
                          <i class="glyphicon glyphicon-trash"> </i> 删除
                        </button>

                    </th>
                </tr>

                </tbody>
                  <!-- 确认发布收集 模态框（Modal） -->
                  <div class="modal fade" id="confirmPublishModal" tabindex="-1" role="dialog" aria-labelledby="confirmPublishModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                  </button>
                                  <h4 class="modal-title" id="confirmPublishModalLabel">
                                      确认发布
                                  </h4>
                              </div>
                              <div class="modal-body" id="confirmPublishModalBody">
                                  发布后他人可以填写该收集表，该表将<b>不可编辑</b>
                              </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">
                                      取消
                                  </button>
                                  <button type="button" class="btn btn-danger" id="surePublishBtn"  data-toggle="modal" data-target="#msgModal">
                                      确定
                                  </button>
                              </div>
                          </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                  </div><!-- /.modal -->

                    <!-- 确认停止收集 模态框（Modal） -->
                    <div class="modal fade" id="confirmStopModal" tabindex="-1" role="dialog" aria-labelledby="confirmStopModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                            </button>
                            <h4 class="modal-title" id="confirmStopModalLabel">
                              确认停止收集
                            </h4>
                          </div>
                          <div class="modal-body">
                              停止后，其他用户不能再填写该收集表
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                              取消
                            </button>
                            <button type="button" class="btn btn-danger" id="sureStopBtn" data-toggle="modal" data-target="#msgModal">
                              确定停止
                            </button>
                          </div>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->

                <!-- 确认删除 模态框（Modal） -->
                <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="confirmDeleteModalLabel">
                          确认删除
                        </h4>
                      </div>
                      <div class="modal-body">
                        删除后将丢失收集表结构和所有收集到的数据
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                          取消
                        </button>
                        <button type="button" class="btn btn-danger" id="sureDeleteBtn"  data-toggle="modal" data-target="#msgModal">
                          确定删除
                        </button>
                      </div>
                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->

                <div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                          &times;
                        </button>
                        <h4 class="modal-title" id="msgModalLabel">操作成功</h4>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <tfoot>
                <tr>
                  <th>名称</th>
                  <th>状态</th>
                  <th>开始时间</th>
                  <th>截止时间</th>
                    <th>已填</th>
                    <th width="30%">操作</th>
                </tr>
                </tfoot>

              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- 页脚 -->
  <footer th:insert="common/bottom :: footer"></footer>
  <!-- Control Sidebar 右侧边栏 -->
  <aside th:insert="common/right :: aside"></aside>
  <!-- 右侧边栏的背景，必须紧接着control sidebar放这个  -->
  <div th:insert="common/right :: aside2"></div>
</div>
<!-- ./wrapper -->

<!-- Js 脚本 -->
<div th:insert="common/html_js :: div_js"></div>
<!-- DataTable 脚本 -->
<script>
    if($(window).width() < 800){
        document.getElementById("table").setAttribute("class",document.getElementById("table").getAttribute("class").concat(" data-table"));
    }
</script>
<div th:insert="common/html_js :: data_table_js"></div>
<script>
    var opreateTableId = 0;

    function table_publish_fun(tableId) {
        opreateTableId = tableId;
        //如果正在收集中则直接跳转
        if ($('#table-state-' + tableId).text() == '收集中'){
            self.location.href = "/collect/share/" + opreateTableId;
        }
        //判断是否已经过去截止时间
        else if((new Date()).getTime() > new Date($('#table-endTime-' + opreateTableId).text()).getTime()){
            $("#confirmPublishModalLabel").text("发布失败");
            $('#confirmPublishModalBody').html('截止时间已过，请重新修改该表，无效截止时间：' +'<b>' + $('#table-endTime-' + tableId).text() + '</b>');
            $('#confirmPublishModal').modal('show');
        }
        //未发布，且截止时间正常，只需用户确认是否发布
        else {
            $("#confirmPublishModalLabel").text('确认发布 ' + $("#" + 'table-name-' + tableId).text());
            $('#confirmPublishModalBody').html('发布后他人可以填写该收集表，该表将<b>不可编辑</b>');
            $('#confirmPublishModal').modal('show');
        }
    }

    function table_stop_fun(tableId){
        opreateTableId = tableId;
        $("#confirmStopModalLabel").text('确认停止收集 ' + $("#" + 'table-name-' + tableId).text());
        $('#confirmStopModal').modal('show');
    }

    function table_del_fun(tableId){
        opreateTableId = tableId;
        $("#confirmDeleteModalLabel").text('确认删除 ' + $("#" + 'table-name-' + tableId).text());
        $('#confirmDeleteModal').modal('show');
    }

    $("#surePublishBtn").click(function(){
        //判断是否已经过去截止时间，若已过，则去编辑
        if((new Date()).getTime() > new Date($('#table-endTime-' + opreateTableId).text()).getTime())
            self.location.href="/collect/edit?t=" + opreateTableId;
        else{
            self.location.href="/collect/share/" + opreateTableId;
        }
    });

    $("#sureStopBtn").click(function(){
        $('#confirmStopModal').modal('hide');
        var targetUrl = '/collect/stop.action?t=' + opreateTableId;
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                if(data.message == "success"){
                    $("#msgModalLabel").text("已停止收集");
                }else{
                    $("#msgModalLabel").text("操作失败" + data.detail);
                }
            },
            error:function(){
                $("#msgModalLabel").text("操作失败");
            }
        })
    });

    $("#sureDeleteBtn").click(function(){
        $('#confirmDeleteModal').modal('hide');
        var targetUrl = '/collect/delete.action?t=' + opreateTableId;
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                if(data.message == "success"){
                    $("#msgModalLabel").text("删除成功");
                }else{
                    $("#msgModalLabel").text("删除失败：" + data.detail);
                }
            },
            error:function(){
                $("#msgModalLabel").text("删除失败");
            }
        })
    });
</script>
</body>
</html>